<template>
	<view class="pos-order-list" style="padding-bottom: 100rpx;" ref="container">
		<view style="padding: 0 30rpx;line-height: 60rpx;background: #fff;">
			<view style="display: inline-block;width: 33%;">名称</view>
			<view style="display: inline-block;width: 33%;text-align: center;">排序</view>
			<view style="display: inline-block;width: 33%;text-align: right;">显示</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="pos-order-goods" style="line-height: 80rpx;">
					<view style="display: inline-block;width: 33%;">{{item.cate_name}}</view>
					<view style="display: inline-block;width: 33%;text-align: center;">{{item.sort}}</view>
					<view style="display: inline-block;width: 33%;text-align: right;">{{item.is_show ? '开启' : '关闭'}}</view>
				</view>
				<view class="operation acea-row row-between-wrapper">
					<view class="more"></view>
					<view class="acea-row row-middle">
						<navigator :url="'/pages/admin/cateEdit/index?id=' + item.store_category_id" hover-class="none" class="bnt">编辑</navigator>
						<view @click="cateDelete(item.store_category_id)" hover-class="none" class="bnt">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="!list.length">
			<image src='../../../static/images/noCart.png' style="margin: 0 auto;width: 414rpx;height: 336rpx;display: block;"></image>
		</view>
		<Loading :loading="loading"></Loading>
		<view style="position: fixed;left: 0;bottom: 20rpx;width: 100%;height: 80rpx;line-height: 80rpx;color: #fff;text-align: center;">
			<navigator url="/pages/admin/cateEdit/index" style="width: 660rpx;margin: 0 auto;border-radius: 60rpx;" hover-class="none" class="bg-color">
				添加分类
			</navigator>
		</view>
	</view>
</template>

<script>
	import {
		getCateList,
		setCateDelete,
	} from "@/api/admin";
	import Loading from '@/components/Loading/index'
	export default {
		name: "AdminCateList",
		components: {
			Loading
		},
		data() {
			return {
				list: [],
				loading: false
			};
		},
		watch: {
		},
		onLoad(option) {
			this.getIndex();
		},
		methods: {
			// 获取数据
			getIndex: function() {
				let that = this;
				if (that.loading || that.loaded) return;
				that.loading = true;
				getCateList().then(
					res => {
						that.loading = false;
						that.list.push.apply(that.list, res.data);
					},
					err => {
						that.$util.Tips({title: err});
					}
				);
			},
			// 初始化
			init: function() {
				this.list = [];
				this.loading = false;
				this.getIndex();
			},
			cateDelete(id){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认删除分类，此操作不可恢复?',
					success: function(res) {
						if (res.confirm) {
							setCateDelete(id)
							.then(res => {
								that.init();
								that.$util.Tips({title: res.message});
							})
							.catch(err => {
								that.$util.Tips({title: err});
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style>
	.pos-order-list .nav {
		width: 100%;
		height: 96upx;
		background-color: #fff;
		font-size: 30upx;
		color: #282828;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.pos-order-list .nav .item.on {
		color: #E93323;
	}

	.pos-order-list .list {
		margin-top: 20upx;
	}

	.pos-order-list .list .item {
		background-color: #fff;
		width: 100%;
	}

	.pos-order-list .list .item~.item {
		margin-top: 20upx;
	}

	.pos-order-list .list .item .order-num {
		height: 124upx;
		border-bottom: 1px solid #eee;
		font-size: 30upx;
		font-weight: bold;
		color: #282828;
		padding: 0 30upx;
	}

	.pos-order-list .list .item .order-num .time {
		font-size: 26upx;
		font-weight: normal;
		color: #999;
		margin-top: -40upx;
	}

	.pos-order-list .list .item .operation {
		padding: 10upx 30upx;
		margin-top: 3upx;
		border-top: 1px solid #f2f2f2;
	}

	.pos-order-list .list .item .operation .more {
		position: relative;
	}

	.pos-order-list .list .item .operation .icon-gengduo {
		font-size: 50upx;
		color: #aaa;
	}

	.pos-order-list .list .item .operation .order .arrow {
		width: 0;
		height: 0;
		border-left: 11upx solid transparent;
		border-right: 11upx solid transparent;
		border-top: 20upx solid #e5e5e5;
		position: absolute;
		left: 15upx;
		bottom: -18upx;
	}

	.pos-order-list .list .item .operation .order .arrow:before {
		content: '';
		width: 0;
		height: 0;
		border-left: 7upx solid transparent;
		border-right: 7upx solid transparent;
		border-top: 20upx solid #fff;
		position: absolute;
		left: -7upx;
		bottom: 0;
	}

	.pos-order-list .list .item .operation .order {
		width: 200upx;
		background-color: #fff;
		border: 1px solid #eee;
		border-radius: 10upx;
		position: absolute;
		top: -100upx;
		z-index: 9;
	}

	.pos-order-list .list .item .operation .order .items {
		height: 77upx;
		line-height: 77upx;
		text-align: center;
	}

	.pos-order-list .list .item .operation .order .items~.items {
		border-top: 1px solid #f5f5f5;
	}

	.pos-order-list .list .item .operation .bnt {
		font-size: 28upx;
		color: #5c5c5c;
		width: 170upx;
		height: 60upx;
		border-radius: 30upx;
		border: 1px solid #bbb;
		text-align: center;
		line-height: 60upx;
		box-sizing: border-box;
	}

	.pos-order-list .list .item .operation .bnt~.bnt {
		margin-left: 14upx;
	}

	.pos-order-goods {
		padding: 0 30upx;
		background-color: #fff;
	}

	.pos-order-goods .goods {
		height: 185upx;
	}

	.pos-order-goods .goods~.goods {
		border-top: 1px dashed #e5e5e5;
	}

	.pos-order-goods .goods .picTxt {
		width: 515upx;
	}

	.pos-order-goods .goods .picTxt .pictrue {
		width: 130upx;
		height: 130upx;
	}

	.pos-order-goods .goods .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6upx;
	}

	.pos-order-goods .goods .picTxt .text {
		width: 365upx;
		height: 130upx;
	}

	.pos-order-goods .goods .picTxt .text .info {
		font-size: 28upx;
		color: #282828;
	}

	.pos-order-goods .goods .picTxt .text .attr {
		font-size: 24upx;
		color: #999;
	}

	.pos-order-goods .goods .money {
		width: 164upx;
		text-align: right;
		font-size: 28upx;
	}

	.pos-order-goods .goods .money .x-money {
		color: #282828;
	}

	.pos-order-goods .goods .money .num {
		color: #ff9600;
		margin: 5upx 0;
	}

	.pos-order-goods .goods .money .y-money {
		color: #999;
		text-decoration: line-through;
	}

	.public-total {
		font-size: 28upx;
		color: #282828;
		border-top: 1px solid #eee;
		height: 92upx;
		line-height: 92upx;
		text-align: right;
		padding: 0 30upx;
		background-color: #fff;
	}

	.public-total .money {
		color: #ff4c3c;
	}
</style>
